style-loader

作用：

处理样式文件。

API：https://github.com/webpack-contrib/style-loader

安装：

npm install style-loader --save-dev

使用：

通常搭配css-loader或file-loader使用，用于通过js插入css样式或文件。

//webpack.config.js
entry:"./src/index.js",
output:{
    filename:"bundle.js",
    path:"./dist"
},
module:{
    rules:[
        {
            test:/\.css$/,
            exclude:/node_modules/,
            loader:['style-loader','css-loader']
        }
    ]
}

如果不配置其它参数，默认会在head标签最后插入style标签，里面放置css样式。

url

默认，css文件会以style的形式插入到head中，如果想以link这种外链的方式引入css就需要指定url：

{
    test:/\.css$/,
    loader:['style-loader/url','file-loader']
}

注意这里就需要搭配file-loader了，毕竟是以文件的形式引入的。同时要注意，外链的方式也是通过js在html中插入link标签的，而不是直接修改输出的html文件。

useable

默认，js加载完成后会在页面插入所有引用到css样式，现在通过指定useable来动态的引入想引的样式。

//webpack.config.js
{
    test:/\.css$/,
    loader:['style-loader/useable','css-loader']
}

//app.js
import style from './src/app.css';
style.use(); //调用use()方法则会插入该css
style.unuse(); //调用unuse()方法则会移除之前引入的css

use()方法等价于ref()，unuse()等价于unref()，而且可以混用。但应该避免取消的次数不应该大于调用的次数。

参数配置：

可以通过配置options来修改默认行为：

hmr：boolean

是否启用热模块替换，默认为true。

根据官方文档，不建议在生产环境中使用，虽然貌似基本没影响，只是少了一部分热替换的js代码而已。

但这个热模块替换不是我预想的效果，甚至无法判断是否启用了，所以先存疑。

base：number

默认为true，好像是用于多个config配置文件的什么样式优先级问题，没搞懂，待定。

attrs：object

这个就简单了，传递一个对象，用于配置style或link的attr属性。

transform：function

默认是false，可以传递一个函数，该函数包含一个css字符串参数，返回的字符串将作为新的css。说白了就是一个css处理函数：

{
    loader:'style-loader',
    options:{
        transform:'./transform.js'
    }
}

//transform.js
module.exports = function(css){
    console.log(css);
    return css;
}

insertAt：string | object

style或link插入的位置。

默认是head标签样式队列的最后边（为了保持较高的优先级）。

如果传递一个字符串top则会插入到样式队列的最顶部。

如果传递一个对象：

{
    loader:'style-loader',
    options:{
        insertAt:{
            before:'#style'
        }
    }
}
//表示，在id为style的元素前边插入样式

可能还有其它的值，但总体来说比较冷门，所以也不去深究了。

insertInto：string

默认样式是插入到head标签里的，通过指定insertInto来修改插入的位置。

传递值为一个选择器字符串，类似于querySelector的参数。

singleton：boolean

起否启用单一标签，默认是false。

如果引入多个css文件，那么默认在html中也会生成多个style标签。如果将该参数置为true，则会把所有的css样式都放入到一个style标签里。

实践证明，不可以在url模式下指定singleon为true，不然编译会报错。

sourceMap：boolean

是否启用map。

说实话我不知道对css启用map目的是什么，暂时无法理解，还需发育。

convertToAbsoluteUrls：boolean

这个参数是搭配sourceMap的，当都指定为true时，那么相对url在被插入到页面前会转化为绝对url。

具体用途，请允许我暂时没想到。

总结

style-loader本身很常用，但是一般都不需要配置options，可能url模式会比较常见一点。